import { MyHead } from "../../../components/head"
import { EnvironmentOutline } from 'antd-mobile-icons'
import { useTiaoZhuan } from "../../../hooks/routers"
import { useDispatch, useSelector } from "react-redux"
import MyList from "../../../components/myList"
import {useState,useEffect} from 'react'
import { AppDispatch, RootReducer } from "../../../types/store"
import { SideBar } from "antd-mobile"
import { getAll } from "../../../api/AddMs"
import './index.scss'
import { changeFL } from "../../../rtk/reduers/data"
const Fenlei = () => {
    const {Tz}  = useTiaoZhuan()
    const cityDw = useSelector<RootReducer,string>(state=>state.MyData.cityDw)
    const city = useSelector((state:any)=>state.MyData.city)
    const [msList,setmsList] = useState<addmsType[]>([])
    const dispatch = useDispatch<AppDispatch>()
    const [MianTagList, setMain] = useState([
        {
            label: "Vue2",
            value: 'vue2',
            id: 1
        },
        {
            label: "React",
            value: 'react',
            id: 2
        },
        {
            label: "jQuery",
            value: 'jq',
            id: 3
        },
        {
            label: "Css3",
            value: 'css',
            id: 4
        }, {
            label: "HTML5",
            value: 'HTML5',
            id: 5
        }, {
            label: "ES6",
            value: 'es6',
            id: 6
        }, {
            label: "JS",
            value: 'js',
            id: 7
        }, {
            label: "Webpack",
            value: 'webpack',
            id: 8
        }, {
            label: "Node",
            value: 'node',
            id: 9
        }, {
            label: "Ts",
            value: 'ts',
            id: 10
        }, {
            label: "Git",
            value: 'git',
            id: 11
        }, {
            label: "小程序",
            value: '小程序',
            id: 12
        }, {
            label: "Ajax",
            value: 'Ajax',
            id: 13
        }, {
            label: "适配",
            value: '适配',
            id: 14
        }, {
            label: "Vue3",
            value: 'Vue3',
            id: 15
        }, {
            label: "地图",
            value: '地图',
            id: 16
        }, {
            label: "数据库",
            value: '数据库',
            id: 17
        }, {
            label: "大屏/大数据",
            value: '大屏/大数据',
            id: 18
        }, {
            label: "低代码",
            value: '低代码',
            id: 19
        }, {
            label: "微前端",
            value: '微前端',
            id: 20
        }, {
            label: "微服务",
            value: '微服务',
            id: 21
        }, {
            label: "混合App",
            value: '混合App',
            id: 22
        }, {
            label: "Http",
            value: 'Http',
            id: 23
        }, {
            label: "UniApp",
            value: 'UniApp',
            id: 24
        },
        {
            label: "其他",
            value: '其他',
            id: 25
        },
    ])
    const activeKey = useSelector<RootReducer,string>(s=>s.MyData.fenleiDW)
    const onChange = (value:any)=>{
        console.log(value);
        
        dispatch(changeFL(value))
    }
    const getData = async()=>{
        let res =await getAll();
        setmsList([...res.result])

    }
    useEffect(()=>{
        getData()
        
    },[])
    return (
        <div>
            <MyHead title='分类' >
            <div onClick={()=>Tz('/city')} style={{fontSize:14,color:"#2db7f5"}}>
                    <EnvironmentOutline />
                    <span>{cityDw}</span>
                </div>
            </MyHead>
            <div className="classify-box">
                <div className="left" style={{width:70,height:'100%',overflow:'auto'}}>
                    <SideBar activeKey={activeKey} style={{width:70}} onChange={onChange}>
                        <SideBar.Item key={-1} title={'全部'} />
                        {
                            MianTagList.map((item:any,index:any) => (
                                <SideBar.Item key={index} title={item.label}   />
                            ))
                        }
                    </SideBar>
                </div>
                {msList && <div className="right" style={{flex:1,padding:10,height:'100%',overflow:'auto'}}>
                    {   
                    msList.length > 0 &&
                        (activeKey=='-1' 
                        ?
                        <MyList list={msList!} ></MyList>
                        :
                        <MyList list={msList!.filter((item:any)=>item.tags.some((v:any)=>v.label==MianTagList[Number(activeKey)].label)) }   ></MyList>
                        )
                    }
                    
                </div> 
                }
            </div>
        </div>
    )
}

export default Fenlei